<template>
	<div class="wrap">
		<div class="box" v-for="(item, index) in data" :key="index" @click="onClick(item)">
			<div class="imgListBox">
				<img :src="item.coverImg" alt="" class="listBoxS">
			</div>
			<div class="titleBox">
				<div class="title">{{ $t('goodsDet.MonthlySales') }}: {{ item.sales }}</div>
				<div class="daZhuTi">{{ item.title }}</div>
				<!-- <div class="daZhuTi">Nike Dunk Low SP</div> -->
				<!-- <div class="daZhuTi">Nike Dunk Low SP</div> -->
				<div class="footer">
					<div v-if="userId" class="price">{{ DollarSignValue }} {{ isVip ? getProportion(item.memberPrice) :
						getProportion(item.price) }}</div>
					<div v-else class="price">{{ DollarSignValue }} {{ getProportion(item.price) }}</div>
					<!-- <div  class="price">{{DollarSignValue}} {{ getProportion(item.price) }}</div> -->
					<!-- <div v-if="title != '拼团购'" class="num">月销: {{item.sales}}</div> -->
					<div v-if="title == '拼团购'" class="num">已拼成: {{ item.number }}</div>
				</div>
				<!-- 收藏icon -->
				<div class="shoucang" @click="getCollect($event, item)">
					<span class="iconfont icon-shoucang guoqi" :class="getExist(item.id) ? '' : 'yishouc'"></span>
					<!-- <svg class="guoqi">
					<use xlink:href="#icon-shoucang"></use>
				</svg> -->
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import {
	Loading
} from 'element-ui';
import { currency } from '../views/js/currency'
export default {
	name: "order_item",
	props: {
		data: [],
		isVip: false,
		title: '',
	},
	data() {
		return {
			userId: this.$cookie.get('userId'),
			uuid: this.$cookie.get('uuid'),
			CollectList: [],
			page: 1,
			selectList: {
				content: [],
			},
			// DollarSignValue:''
		}
	},
	mounted() {
		this.getDollarSign()
		if (this.uuid) {
			this.isCheak();
			this.getCollectList()
		}
	},
	computed: {
		DollarSignValue() {
			// let dollar=this.$store.state.currencyInfo.figure
			let dollar = this.getDollarSign()
			return dollar
		}
	},
	methods: {
		// 获取货币符号
		getDollarSign() {
			let dollar = this.$store.state.currencyInfo.figure
			return dollar
		},
		// 金额计算比例
		getProportion(money) {
			let proportion = this.$store.state.currencyInfo.scale
			let price = currency(proportion, money)
			// console.error('price-----',price)
			return price
			// return money
		},
		onClick(e) {
			if (this.title == '拼团购') {
				this.$router.push({
					path: '/pintuangouDet?id=' + e.id + '&title=拼团购'
				})
			} else {
				this.$router.push({
					path: '/goodsDet?id=' + e.id
				})
			}
		},
		getCollect(event, obj) {
			console.log('aaa', obj)
			event.stopPropagation();
			if (this.uuid) {
				var weizhiIndex = -1
				const yesNo = this.CollectList.some((item, index) => {
					if (item.id == obj.id) {
						weizhiIndex = index
						return true
					}
				})
				if (yesNo) {
					this.setCkeckXiangSi(obj, 1, this.CollectList[weizhiIndex].shoucangId)
				} else {
					this.setCkeckXiangSi(obj, 0, -1)
				}
			}
		},
		getExist(itemId) {
			let aaaList = []
			const yesNo = this.CollectList.some((item, index) => {
				if (item.id == itemId) {
					aaaList.push(itemId)
					return true
				}
			})
			return !yesNo
			// return this.CollectList.some((item) => item.id == itemId);
		},
		//是否收藏
		isCheak() {
			this.$http({
				url: this.$http.adornUrl("/selfUserCollect/check"),
				method: "get",
				params: this.$http.adornParams({
					goodsId: this.$route.query.id,
					userId: this.userId
				})
			}).then(({ data }) => {
				if (data.status == 0) {
					this.isCheck = data.data;
					this.shoucangId = data.msg;
				}
			});
		},
		//获取收藏数据列表
		getCollectList() {
			let loadingInstance = Loading.service({
				lock: true,
				text: '加载中……',
				background: 'rgba(0, 0, 0, 0.7)'
			});

			this.$http({
				url: this.$http.adornUrl('/selfUserCollect/list'),
				method: 'get',
				params: this.$http.adornParams({
					'page': this.page - 1,
					'size': 999,
					'userId': this.userId,
				})
			}).then(({
				data
			}) => {
				this.$nextTick(() => {
					loadingInstance.close();
				})
				if (data && data.status === 0) {
					let returnData = data.data
					let dataLsit = []
					this.CollectList = []
					returnData.content.forEach(res => {
						if (res.goods) {
							dataLsit.push(res)
							// 执行后续操作
							this.CollectList.push({
								id: res.goodsId,
								shoucangId: res.id
							})
						}
					})
					this.selectList.content = dataLsit
				}
			})
		},
		// 相似的商品收藏
		setCkeckXiangSi(objItem, num, shoucangId) {
			if (this.userId) {
				if (!num) {
					this.$http({
						url: this.$http.adornUrl("/selfUserCollect/save"),
						method: "post",
						data: this.$http.adornData({
							goodsId: objItem.id,
							coverImg: objItem.coverImg,
							price: objItem.price,
							title: objItem.title,
							userId: this.userId
						})
					}).then(({ data }) => {
						if (data.status == 0) {
							this.isCheak();
							this.getCollectList()
						}
					});
				} else {
					this.$http({
						url: this.$http.adornUrl("/selfUserCollect/delete"),
						method: "get",
						params: this.$http.adornParams({
							id: shoucangId
						})
					}).then(({ data }) => {
						if (data.status == 0) {
							this.isCheak();
							this.getCollectList()
							// console.log('删除收藏----data', data)
						}
					}).catch((err => {
						this.getCollectList()
					}));
				}
			}
		},

	}

}
</script>

<style scoped>
.wrap {
	display: grid;
	width: 1200px;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 3px;
	justify-content: space-between;
}

.box {
	width: 280px !important;
	/* height: 333px; */
	/* height: 320px; */
	/* padding: 20px; */
	background: #fff;
	border: 1px solid #F6F5F7;
	box-sizing: border-box;
	margin-bottom: 20px;
	border-radius: 20px;
	position: relative;
	box-shadow: 1px 0px 3px 3px #f1f1f1;
	padding-bottom: 10px;
	overflow: hidden;
}

/* img {
	width: 100%;
	height: 197px;
} */
.imgListBox {
	width: 100%;
	height: 280px;
	overflow: hidden;
	/* border-top-left-radius: 20px;
	border-top-right-radius: 20px; */
	/* background: #0578E4; */
}

.listBoxS {
	width: 280px;
	height: 280px;
	object-fit: cover;
}
.titleBox{
	height: 180px;
	padding: 10px 5px 10px 14px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.shoucang {
	width: 47px !important;
	height: 47px !important;
	background: #fff !important;
	border-radius: 50% !important;
	position: absolute !important;
	top: 253px;
	right: 17px;
}

.shoucang .guoqi {
	display: inline-block;
	/* width: 47px !important;
	height: 47px !important; */
	font-size: 47px;
	z-index: 10;
	/* color: cadetblue; */
}

.shoucang:hover .guoqi {
	color: rgba(0, 0, 0, .5);
	cursor: pointer;
}

.yishouc {
	color: #EA7408;
}

.shoucang:hover .yishouc {
	color: rgba(234, 116, 8, .5);
}

.title {
	/* display: -webkit-box; */
	/* -webkit-line-clamp: 2;
		-webkit-box-orient: vertical; */
	/* overflow: hidden; */
	padding-top: 7px;
	/* padding-left: 14px; */
	font-size: 18px;
	font-weight: 400;
	color: #3F3F3F;
	width: 177px;
	white-space: nowrap;
	height: 34px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.daZhuTi {
	/* width: 203px; */
	/* height: 34px; */
	font-size: 24px;
	font-weight: 700;
	color: #000;
	/* padding-left: 14px; */
	/* margin-top: 21px; */
	/* white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis; */
	box-sizing: border-box;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	/* 显示的行数，可以根据需要修改 */
}

.footer {
	display: flex;
	justify-content: space-between;
	margin-top: 8px;
}

.price {
	font-weight: 400;
	/* color: #ff2d55; */
	height: 34px;
	font-size: 24px;
	padding-left: 14px;
	color: #000;
}

.num {
	font-size: 12px;
	color: #666666;
	font-weight: 400;
}
</style>
